<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr{
            height: 60px;
        }
        td{
            width: 100px;
            border-spacing: 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 在页面上根据数据，动态创建表格
        
 创建一个表格，展示上面数组中的信息 -->
        <table border="1px"  cellspacing="0" align="center">


        </table>
    <script>
        var arr = [{ name: 'Jack', age: 18, gender: '男' }, { name: 'Rose', age: 20, gender: '女' }, { name: 'Top', age: 22, gender: '男' }];
        var res = document.querySelector("tr");
        var str = "";
        arr.forEach(function(arr){
            str +=`<tr><td>${arr.name}</td><td>${arr.age}</td><td>${arr.gender}</td></tr>`
        })
        var table = document.querySelector("table");
        table.innerHTML = str;
    </script>
</body>

</html>